<template>
  <view>
    <u-swiper :list="list1"></u-swiper>
    <scroll-view
      class="scroll_view_h"
      @scroll="scroll"
      scroll-x="true"
      :scroll-left="scroll_left"
      scroll-with-animation
    >
      <view id="demo1" class="scroll-view-item_H">
        <image src="../../static/1.jpg"></image>
      </view>
      <view id="demo2" class="scroll-view-item_H">
        <image src="../../static/2.jpg"></image>
      </view>
      <view id="demo3" class="scroll-view-item_H">
        <image src="../../static/3.jpg" @click="setScrollLeft"></image>
      </view>
    </scroll-view>
    <camera
      device-position="back"
      flash="off"
      @error="error"
      style="width: 100%; height: 300px"
    ></camera>
    <button type="primary" @click="takePhoto">拍照</button>
    <view>预览</view>
    <image style="width: 100%" mode="widthFix" :src="src"></image>
    <button type="primary" @click="authSetting">授权</button>
    <button type="warn" @click="platform">判断设备信息,是哪个平台</button>
    <view class="navigation-container">
      <map
        id="map"
        class="map"
        :scale="scale"
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
        bindtap="bindTap"
        show-location
      ></map>
    </view>
    <view>
      <button type="primary" @click="bindNav">导航去这里</button>
    </view>
  </view>
</template>

<script>
import { getMenu } from "@/utils/config/api.js";
export default {
  data() {
    return {
      markers: [
        {
          id: 1,
          latitude: 30.57899,
          longitude: 104.07275,
          width: 50,
          height: 50,
          iconPath: "/static/location.png",
          callout: {
            content: "成都德慈医养中心",
            color: "#000",
            fontSize: 14,
            borderRadius: 10,
            bgColor: "#fff",
            padding: 10,
            display: "ALWAYS",
          },
        },
      ],
      latitude: 30.57899,
      longitude: 104.07275,
      scale: 15,
      scroll_left: 0,
      old_scroll_left: 0,
      src: "",
      list1: [
        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
      ],
    };
  },
  onload() {
    uni.$u.mpShare.title = "天苍苍野茫茫，风吹草低见牛羊";
  },
  onShareAppMessage(res) {
    return {
      title: "分享到聊天及群聊",
      path: "page/index/index",
    };
  },
  onShareTimeline(res) {
    if (res.from === "button") {
      // 来自页面内分享按钮
      console.log(res.target);
    }
    return {
      title: "分享到朋友圈",
      path: "page/index/index",
    };
  },
  onLaunch() {},
  onShow() {},
  mounted() {
    this.getMenu();
  },
  methods: {
    async getMenu() {
      var data = await getMenu("api.php", {
        params: {
          api: 9,
          lx: "meizi",
          dz: 5,
        },
      });
    },
    platform() {
      console.log(uni.getSystemInfoSync().platform);
    },
    authSetting() {
      // 检查是否已经授权地理位置
      uni.getSetting({
        success: function (res) {
          console.log(res.authSetting);
          if (!res.authSetting["scope.userLocation"]) {
            // 尝试直接请求权限
            uni.authorize({
              scope: "scope.userLocation",
              success: function () {
                // 授权成功
              },
              fail: function () {
                // 用户拒绝或没有授权，显示提示框并引导用户去设置页面重新开启权限
                uni.showModal({
                  title: "提示",
                  content: "为了提供更好的服务，请允许我们获取您的地理位置信息",
                  showCancel: true,
                  confirmText: "去授权",
                  success: function (res) {
                    if (res.confirm) {
                      uni.openSetting({
                        success: function (data) {
                          console.log(data.authSetting);
                        },
                      });
                    }
                  },
                });
              },
            });
          }
        },
      });
      wx.chooseLocation({
        success: function (res) {
          console.log(res);
        },
      });
    },
    bindNav() {
      const mapCtx = wx.createMapContext("map", this);
      mapCtx.openMapApp({
        latitude: this.latitude,
        longitude: this.longitude,
        destination: "成都德慈医养中心",
      });
    },
    scroll(e) {
      this.old_scroll_left = e.detail.scrollLeft;
    },
    setScrollLeft() {
      this.scroll_left = this.old_scroll_left;
      this.$nextTick(() => {
        this.scroll_left = 0;
      });
    },
    takePhoto() {
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: "high",
        success: (res) => {
          this.src = res.tempImagePath;
        },
      });
    },
    error(e) {
      console.log(e.detail);
    },
  },
};
</script>
<style lang="scss">
.scroll_view_h {
  width: 100%;
  height: 300rpx;
  white-space: nowrap;
}
.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 5rpx;
  box-sizing: border-box;
}
.scroll-view-item_H image {
  width: 100%;
  height: 100%;
}
.video .cover-image {
  width: 100rpx;
  height: 100rpx;
}
.map {
  height: 1000rpx;
  width: 100vw;
}
</style>
